<template>
  <div class="container">
    <index-head></index-head>
    <div class="main clearfix">
      <div class="mainPositionWin" v-show="mainPositionWinShow">
        <div class="positionTitle">
          <div class="clearfix">
            <p class="positionTitle_a">条件</p>
            <p class="positionTitle_close" @click="conditionsClose">+</p>
            <p class="positionTitle_extract" @click="termSubmit">数据提取</p>
            <p class="positionTitle_clear" @click="conditionsClear">清空</p>
          </div>
          <div class="navCntBox clearfix">
            <div class="getIndexBox">
              <span class="titleYellow">指标</span>
              <input type="text" placeholder="输入关键字进行过滤" class="getIndexInput">
              <el-checkbox-group v-model="getIndex" @change="handleCheckedGetIndexChange">
                <el-checkbox v-for="getIndexName in getIndexs" :label="getIndexName.key" :key="getIndexName.key">
                  {{getIndexName.label}}</el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="getTimeBox">
              <p class="titleYellow">时间</p>
              <el-checkbox-group v-model="getTime" @change="handleCheckedGetTimeChange">
                <el-checkbox v-for="getTimeName in getTimes" :label="getTimeName.label" :key="getTimeName.key">
                  {{getTimeName.label}}</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>
      </div>
      <div class="mainTerm">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="指标" name="first">
            <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
            <div class="tree">
              <el-tree class="filter-tree" :data="data" :props="defaultProps" :filter-node-method="filterNode"
                ref="tree" show-checkbox node-key="codes" @node-click="nodeClickHandle" :default-expanded-keys="[]"
                @check-change="checkChangeHandle"></el-tree>
            </div>
          </el-tab-pane>
          <el-tab-pane label="时间" name="second" class="timeCheck">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
            </el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
              <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
            </el-checkbox-group>
          </el-tab-pane>
        </el-tabs>
        <p @click="termlook" class="conditions">查看条件</p>
      </div>
      <div class="mainContainer">
        <div class="predictWinBox" v-show="analysisWin">
          <div class="predictWin">
            <p class="predictTitle">指标分析</p>
            <el-select v-model="anaVal" placeholder="请选择">
              <el-option v-for="item in anaName" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <div class="predictBtn clearfix">
              <p @click="anaCancel">取消</p>
              <p @click="anaBegin">开始分析</p>
            </div>
          </div>
        </div>
        <div class="predictWinBox" v-show="predictWin">
          <div class="predictWin">
            <p class="predictTitle">指标预测</p>
            <el-select v-model="preVal" placeholder="请选择">
              <el-option v-for="item in preNum" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-select v-model="preNameVal" placeholder="请选择">
              <el-option v-for="item in preName" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <div class="predictBtn clearfix">
              <p @click="preCancel">取消</p>
              <p @click="preBegin">开始预测</p>
            </div>
          </div>
        </div>
        <div class="predictWinBox" v-show="statisticalWin">
          <div class="predictWin">
            <p class="predictTitle">指标统计</p>
            <el-checkbox-group v-model="checkedStat" @change="handleCheckedStatChange">
              <el-checkbox v-for="statName in statNames" :label="statName.label" :key="statName.key">{{statName.label}}
              </el-checkbox>
            </el-checkbox-group>
            <div class="predictBtn clearfix">
              <p @click="staCancel">取消</p>
              <p @click="staBegin">开始统计</p>
            </div>
          </div>
        </div>
        <div class="mainConHead clearfix">
          <el-select v-model="value" placeholder="请选择" @change="selectHandle1">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>

        <div class="mainBody">
          <ul class="mainBody_tab_tilte clearfix">
            <li @click="stateGraph" :class="{active:cur==0}">
              <img src="../assets/image/mainCon_icon5.png" />
              <span>图表 /</span>
              <img src="../assets/image/mainCon_icon6.png" />
              <span>报表</span>
            </li>
            <li @click="statement" :class="{active:cur==1}">
              <img src="../assets/image/mainCon_icon6.png" />
              <span>报表</span>
            </li>
            <li @click="graph" :class="{active:cur==2}">
              <img src="../assets/image/mainCon_icon5.png" />
              <span>图表</span>
            </li>
            <li class="macro_shu">|</li>
            <li @click="analysis" :class="{active:cur==3}">
              <img src="../assets/image/mainCon_icon7.png" />
              <span>分析</span>
            </li>
            <li @click="predict" :class="{active:cur==4}">
              <img src="../assets/image/mainCon_icon8.png" />
              <span>预测</span>
            </li>
            <li @click="statistical" :class="{active:cur==5}">
              <img src="../assets/image/mainCon_icon9.png" />
              <span>统计</span>
            </li>
            <li class="macro_shu">|</li>
            <li>
              <img src="../assets/image/mainCon_icon1.png" />
              <span>收藏</span>
            </li>
            <li @click="output">
              <img src="../assets/image/mainCon_icon2.png" />
              <span>导出</span>
            </li>
            <li @click="print">
              <img src="../assets/image/mainCon_icon3.png" />
              <span>打印</span>
            </li>
            <li @click="downloadImpByChart">
              <img src="../assets/image/mainCon_icon4.png" />
              <span>保存</span>
            </li>
          </ul>
          <div class="mainBody_tab_content">
            <div>
              <div id="anaData" class="clearfix" v-show="anaDataShow"></div>
              <div class="chartBox clearfix">
                <div id="myChart" :style="{width: '90%', height: '400px'}" v-show="graphShow"></div>
                <ul v-show="graphShow" class="chartChange">
                  <li @click="zhuzhuang" :class="{on:changeOn==0}"><img
                      src="../assets/image/chartChange1.png" /><span>柱状图</span></li>
                  <li @click="hengtiao" :class="{on:changeOn==1}"><img
                      src="../assets/image/chartChange2.png" /><span>横条图</span></li>
                  <li @click="line" :class="{on:changeOn==2}"><img src="../assets/image/chartChange3.png" /><span>折线图</span>
                  </li>
                  <li @click="duidie" :class="{on:changeOn==3}"><img src="../assets/image/chartChange4.png" /><span>堆叠图</span>
                  </li>
                  <li @click="bing()" :class="{on:changeOn==4}"><img src="../assets/image/chartChange5.png" /><span>饼图</span>
                  </li>
                </ul>
              </div>
              <el-table :data="tableData" ref="multipleTable" style="width: 100%"
                :default-sort="{prop: 'date', order: 'descending'}" @selection-change="handleSelectionChange"
                v-show="statementShow" @sort-change="changeTableSort" id="mytable" :class="trNum">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="name" label="指标" sortable width="360"></el-table-column>
                <el-table-column v-for="item in tableSearch" v-bind:key="item" :prop="item" :label="item" sortable>
                </el-table-column>
                <el-table-column v-for="item in tableYears" v-bind:key="item" :prop="item" :label="item" sortable>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
<!--    <com-foot></com-foot>-->
  </div>
</template>
<script>
  import indexHead from "../components/head";
  // import comFoot from "../components/comfoot";
  import FileSaver from 'file-saver'
  import XLSX from 'xlsx'
  export default {
    data() {
      return {
        trNum: 'trNum',
        anaDataShow: true,
        mainPositionWinShow: false,
        getIndex: [],
        getTime: [],
        getTimes: [],
        getIndexs: [],
        checkedStat: [],
        statNames: [
          {
            label: '求和值',
            key: '1',
          },
          {
            label: '求平均',
            key: '2',
          },
          {
            label: '最大值',
            key: '3',
          },
          {
            label: '求最小值',
            key: '4',
          },
          {
            label: '中位数',
            key: '5',
          },
          {
            label: '众数',
            key: '6',
          },
          {
            label: '方差',
            key: '7',
          },
          {
            label: '标准差',
            key: '8',
          }
        ],
        statisticalWin: false,
        graphShow: true,
        statementShow: true,
        anaData: '',
        preNum: [
          {
            value: "1",
            label: "1"
          },
          {
            value: "2",
            label: "2"
          },
          {
            value: "3",
            label: "3"
          },
          {
            value: "4",
            label: "4"
          },
          {
            value: "5",
            label: "5"
          }
        ],
        preName: [
          {
            value: "自回归移动平均模型",
            label: "自回归移动平均模型"
          },
          {
            value: "霍尔特指数平滑法",
            label: "霍尔特指数平滑法"
          },
          {
            value: "简单指标平滑法",
            label: "简单指标平滑法"
          },
          {
            value: "霍尔特-温特指数平滑法",
            label: "霍尔特-温特指数平滑法"
          }
        ],
        anaName: [
          {
            value: "相关性分析",
            label: "相关性分析"
          },
          {
            value: "主成分分析",
            label: "主成分分析"
          },
          {
            value: "线性回归法",
            label: "线性回归法"
          },
          {
            value: "描述性分析",
            label: "描述性分析"
          }
        ],
        analysisWin: false,
        preVal: "5",
        preNameVal: "自回归移动平均模型",
        anaVal: "相关性分析",
        predictWin: false,
        cur: 0,
        changeOn: 0,
        tableYears: [],
        tableLegend: [],
        chartSeries: [],
        tableSearch: [],
        chartType: "bar",
        chartDirection: 'row',
        chartStack: false,
        checkAll: false,
        checkedCities: [],
        cities: [],
        isIndeterminate: true,
        options: [
          {
            value: "1",
            label: "时间+指标"
          },
          {
            value: "2",
            label: "指标+时间"
          }
        ],
        value: "1",
        tableData: [],
        holtPath: {
          自回归移动平均模型: "/analysis-util/GetAutoRegressive",
          霍尔特指数平滑法: "/analysis-util/GetHoltWinters",
          简单指标平滑法: "/analysis-util/GetSimple",
          "霍尔特-温特指数平滑法": "/analysis-util/GetWinters"
        },
        anaPath: {
          相关性分析: "/analysis-util/GetConnection",
          主成分分析: "/analysis-util/GetIngredient",
          线性回归法: "/analysis-util/GetLinearRegression",
          描述性分析: "/analysis-util/GetStatistical"
        },
        activeName: "first",
        filterText: "",
        data: [],
        defaultProps: {
          children: "children",
          label: "label"
        },

        multipleSelection: []
      };
    },
    components: {
      // comFoot,
      indexHead
    },

    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    mounted() {
      var that = this;
      // this.drawLine();
      this.$axios
        .get("http://117.107.199.85:5400/webprovinceyear/getIndex")
        .then(function (response) {
          var data = that.getNavData(response.data);
          that.data = data;
        })
        .catch(function (error) {
          console.log(error);
        });

      this.$axios
        .get("http://117.107.199.85:5400/webprovinceyear/getTime")
        .then(function (res) {
          that.cities = res.data
        })
        .catch(function (error) {
          console.log(error);
        });
      this.termSubmit()
    },
    methods: {
      termlook() {
        this.mainPositionWinShow = true
      },
      termSubmit() {
        this.mainPositionWinShow = false
        var that = this
        var checkedKey = this.$refs.tree.getCheckedKeys()
        var codes = []
        for (var i = 0; i < checkedKey.length; i++) {
          if (/^id/.test(checkedKey[i])) {
            continue;
          }
          codes.push(checkedKey[i])
        }
        var param = new URLSearchParams();
        var url = "http://117.107.199.85:5400/webprovinceyear/getData"
        var method = 'get'
        if (codes.length > 0) {
          url = "http://117.107.199.85:5400/webprovinceyear/findData"
          method = 'post'
          param.append('codes', codes.join());
          param.append('regions', 110000);
          param.append('times', this.checkedCities.join());
        }
        this.$axios[method](url, param)
          .then(function (res) {
            var arr = [];
            var series = [];
            that.tableYears = []
            for (var k in res.data) {
              for (var code in res.data[k]) {
                var data = res.data[k][code];
                var item = {
                  name: k
                };
                for (var l in data) {
                  item[l] = data[l][0];
                  if (that.tableYears.indexOf(l) < 0) {
                    that.tableYears.push(l);
                  }
                }
                arr.push(item);
              }
            }
            that.tableYears.sort();
            that.tableData = arr;
            setTimeout(function () {
              that.setSelect(that.tableData);
            });

            that.drawLine();
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      selectHandle1: function (value) {
        this.drawLine();
      },
      setSelect: function (rows) {
        var _this = this;
        if (rows) {
          for (var i = 0; i < rows.length; i++) {
            this.$refs.multipleTable.toggleRowSelection(rows[i]);
          }
        }
      },
      handleSelectionChange(arr) {
        // var that = this;
        this.multipleSelection = arr;
        // console.log(arr)
        if (this.chartType == 'pie' && arr.length > 1) {
          this.$refs.multipleTable.clearSelection();
          this.$refs.multipleTable.toggleRowSelection(arr[arr.length - 1]);
        }
        this.drawLine();
      },
      preBegin() {
        var that = this;
        this.predictWin = false;
        var url = this.holtPath[this.preNameVal];
        var ajaxData = {
          num: this.preVal
        };
        for (var i = 0; i < this.tableData.length; i++) {
          var data = this.tableData[i];
          var key = "";
          var arr = [];
          for (var k in data) {
            if (k == "name") {
              key = data[k];
            } else {
              var item = {};
              item[k] = data[k];
              arr.push(item);
            }
          }
          ajaxData[key] = arr;
        }

        this.$axios
          .post("http://117.107.199.85:5300" + url, ajaxData)
          .then(function (res) {
            that.trNum = 'trNum' + that.preVal
            var resMap = res.data;
            var searchArr = [];
            for (var i = 0; i < that.tableData.length; i++) {
              var item = that.tableData[i];
              var addData = resMap[item.name];
              for (var j = 0; j < addData.length; j++) {
                for (var k in addData[j]) {
                  if (!/期/.test(k)) {
                    continue;
                  }
                  var finalData = addData[j];
                  if (searchArr.indexOf(k) < 0) {
                    searchArr.push(k);
                  }
                  item[k] = finalData[k];
                }
              }
            }
            that.tableSearch = searchArr;
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      staBegin() {
        var that = this;
        var selectedName = this.checkedStat[0]
        if (selectedName == '求和值') {
          this.sum()
        }
        this.statisticalWin = false;
      },

      sum() {
        var result = {
          name: '求和值'
        };
        if (this.isAddTableData) {
          this.tableData.pop()
        }
        var data = this.tableData;
        this.isAddTableData = false;
        for (var i = 0; i < data.length; i++) {
          for (var k in data[i]) {
            if (k == 'name') {
              continue;
            }
            if (!result[k]) {
              result[k] = 0
            }
            result[k] = parseFloat((result[k] + data[i][k]).toFixed(2))
          }
        }
        this.tableData.push(result)
        this.isAddTableData = true;
      },
      anaBegin() {
        var that = this;
        this.predictWin = false;
        var url = this.anaPath[this.anaVal];
        var ajaxData = {};
        for (var i = 0; i < this.tableData.length; i++) {
          var data = this.tableData[i];
          var key = "";
          var arr = [];
          for (var k in data) {
            if (k == "name") {
              key = data[k];
            } else {
              var item = {};
              item[k] = data[k];
              arr.push(item);
            }
          }
          ajaxData[key] = arr;
        }
        //anaData
        this.$axios
          .post("http://117.107.199.85:5300" + url, ajaxData)
          .then(function (res) {
            that.analysisWin = false;
            var html = ''
            switch (that.anaVal) {
              case '相关性分析':
                html += '<h1>相关性分析</h1>'
                for (var k = 0; k < res.data.data.length; k++) {
                  html += '<div class="anaXiang">'
                  for (var i = 0; i < res.data.data[k].length; i++) {
                    html += '<span class="anaXiangSpan">' + res.data.data[k][i] + '</span>'
                  }
                  html += '</div>'
                }
                break;

              case '主成分分析':
                break;

              case '线性回归法':
                break;

              case '描述性分析':
                html += '<h1>描述性分析</h1>'
                for (var k in res.data) {
                  html += '<div class="anaMiao">'
                  html += '<p class="anaMiaoTitle">' + k + '</p>'
                  for (var i = 0; i < res.data[k].length; i++) {
                    html += '<p class="anaMiaoSpan"><span>' + res.data[k][i].split(":")[0] + '</span><span>' + res.data[k][i].split(":")[1] + '</span></p>'
                  }
                  html += '</div>'
                }
                break;

              default:
                break;
            }

            document.getElementById("anaData").innerHTML = html
          })
      },
      preCancel() {
        this.predictWin = false;
      },
      staCancel() {
        this.statisticalWin = false;
      },
      anaCancel() {
        this.analysisWin = false;
      },
      predict() {
        this.cur = 4;
        this.predictWin = true;
        this.analysisWin = false;
        this.statisticalWin = false;
      },
      analysis() {
        this.analysisWin = true;
        this.predictWin = false;
        this.statisticalWin = false;
        this.cur = 3;
      },
      statistical() {
        this.cur = 5;
        this.statisticalWin = true;
        this.predictWin = false;
        this.analysisWin = false;
      },

      handleCheckAllChange(val) {
        this.checkedCities = val ? this.cities : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate =
          checkedCount > 0 && checkedCount < this.cities.length;
      },
      handleClick(tab, event) {
      },
      getNavData(list, parentId) {
        if (!parentId) {
          parentId = 0;
        }
        let result = [];
        for (var i = 0; i < list.length; i++) {
          if (list[i].parenid == parentId) {
            list[i].label = list[i].fullname;
            list[i].children = this.getNavData(list, list[i].id);
            list[i].codes = list[i].timeTypeCode ? list[i].code + '_' + list[i].timeTypeCode : 'id_' + list[i].id;
            result.push(list[i]);
          }
        }
        return result;
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.label ? data.label.indexOf(value) !== -1 : false;
      },

      formatter(row, column) {
        return row.address;
      },

      drawLine() {
        var that = this;
        var tableLegend = [];
        var seriesMap = {};
        var series = [];
        var legend = [];
        switch (this.value) {
          case "2":
            for (var i = 0; i < this.multipleSelection.length; i++) {
              var data = this.multipleSelection[i];
              tableLegend.push(data.name);
              for (var j = 0; j < this.tableYears.length; j++) {
                var year = this.tableYears[j];
                if (!seriesMap[year]) {
                  seriesMap[year] = [];
                }
                seriesMap[year].push(data[year]);
              }
            }
            for (var j = 0; j < this.tableYears.length; j++) {
              var year = this.tableYears[j];
              var item = {
                name: year,
                type: that.chartType,
                data: seriesMap[year]
              };
              if (this.chartStack) {
                item.stack = '总量'
                item.areaStyle = {}
              }
              series.push(item);
            }
            that.tableLegend = tableLegend;
            legend = tableLegend;
            if (this.chartType == 'pie' && series.length > 0) {
              series = [series[0]]
              for (var i = 0; i < series[0].data.length; i++) {
                var itemData = {}
                itemData.name = legend[i]
                itemData.value = series[0].data[i]
                series[0].data[i] = itemData
              }
            }
            that.series = series;
            break;

          default:
            for (var i = 0; i < this.multipleSelection.length; i++) {
              var item = {
                name: this.multipleSelection[i].name,
                type: that.chartType,
                data: []
              };
              for (var j = 0; j < that.tableYears.length; j++) {
                item.data.push(this.multipleSelection[i][that.tableYears[j]]);
              }
              if (this.chartStack) {
                item.stack = '总量'
                item.areaStyle = {}
              }
              series.push(item);
            }
            legend = that.tableYears;
            if (this.chartType == 'pie' && series.length > 0) {
              series = [series[0]]
              for (var i = 0; i < series[0].data.length; i++) {
                var itemData = {}
                itemData.name = legend[i]
                itemData.value = series[0].data[i]
                series[0].data[i] = itemData
              }
            }
            that.series = series;
            break;
        }

        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById("myChart"));

        var rowXAxis = [
          {
            type: "category",
            data: legend,
            axisLabel: {
              fontSize: 12,
              interval: 0,
              rotate: -40,
              formatter: function (value) {
                var ret = "";//拼接加\n返回的类目项
                var maxLength = 6;//每项显示文字个数
                var valLength = value.length;//X轴类目项的文字个数
                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                if (rowN > 1)//如果类目项的文字大于3,
                {
                  for (var i = 0; i < rowN; i++) {
                    var temp = "";//每次截取的字符串
                    var start = i * maxLength;//开始截取的位置
                    var end = start + maxLength;//结束截取的位置
                    //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                    temp = value.substring(start, end) + "\n";
                    ret += temp; //凭借最终的字符串
                  }
                  return ret;
                }
                else {
                  return value;
                }
              },
              textStyle: {
                //改变刻度字体样式
                color: "#fff"
              }
            }
          }
        ]
        var rowYAxis = [
          {
            type: "value",
            axisLabel: {
              fontSize: 12,
              textStyle: {
                //改变刻度字体样式
                color: "#fff"
              }
            }
          }
        ]
        var chartOption = {
          title: {},
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          toolbox: {
            show: false,
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ["line", "bar"] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          calculable: true,
          series: series
        }
        if (this.chartType != 'pie') {
          chartOption.xAxis = this.chartDirection == 'row' ? rowXAxis : rowYAxis
          chartOption.yAxis = this.chartDirection == 'row' ? rowYAxis : rowXAxis
          chartOption.tooltip = {
            trigger: "axis"
          }
        }
        // 绘制图表
        myChart.setOption(chartOption, true);
      },

      zhuzhuang() {
        this.changeOn = 0;
        this.chartType = "bar";
        this.chartDirection = 'row'
        this.chartStack = false
        this.drawLine();
        this.$refs.multipleTable.clearSelection();
        this.tableData.forEach((row, index) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      },
      hengtiao() {
        this.changeOn = 1;
        this.chartType = "bar";
        this.chartDirection = 'column'
        this.chartStack = false
        this.drawLine();
        this.$refs.multipleTable.clearSelection();
        this.tableData.forEach((row, index) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      },
      line() {
        this.changeOn = 2;
        this.chartType = "line";
        this.chartDirection = 'row'
        this.chartStack = false
        this.drawLine();
        this.$refs.multipleTable.clearSelection();
        this.tableData.forEach((row, index) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      },
      duidie() {
        this.changeOn = 3;
        this.chartType = "line";
        this.chartDirection = 'row'
        this.chartStack = true
        this.drawLine();
        this.$refs.multipleTable.clearSelection();
        this.tableData.forEach((row, index) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      },
      bing(rows, arr) {
        this.changeOn = 4;
        this.chartType = "pie";
        this.chartDirection = 'row'
        this.chartStack = false
        this.drawLine();
        //清空勾选值
        var row = this.multipleSelection.length > 0 ? this.multipleSelection[0] : this.tableData[0]
        this.$refs.multipleTable.clearSelection();
        if (rows) {
          rows.forEach((row, index) => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.toggleRowSelection(row);
        }
      },
      statement() {
        this.cur = 1;
        this.statementShow = true;
        this.graphShow = false;
      },
      graph() {
        this.cur = 2;
        this.graphShow = true;
        this.statementShow = false;
      },
      stateGraph() {
        this.cur = 0;
        this.graphShow = true;
        this.statementShow = true;
        document.getElementById("anaData").innerHTML = ''
      },
      nodeClickHandle(data) {
        var checkedKeys = this.$refs.tree.getCheckedKeys()
        if (!data.children || data.children.length == 0) {
          for (var i = 0; i < this.data.length; i++) {
            var data1 = this.data[i]
            if (data1.children && data1.children.length) {
              if (checkedKeys.indexOf(data1.codes) >= 0) {
                checkedKeys.splice(checkedKeys.indexOf(data1.codes), 1)
              }
              for (var j = 0; j < data1.children.length; j++) {
                var data2 = data1.children[j]
                if (data2.children && data2.children.length) {
                  if (checkedKeys.indexOf(data2.codes) >= 0) {
                    checkedKeys.splice(checkedKeys.indexOf(data2.codes), 1)
                  }
                }
              }
            }
          }
          var idx = checkedKeys.indexOf(data.codes)
          if (idx < 0) {
            checkedKeys.push(data.codes)
          } else {
            checkedKeys.splice(idx, 1)
          }
          this.$refs.tree.setCheckedKeys(checkedKeys);
        }
      },
      checkChangeHandle(data) {
        var that = this
        var checkedKeys = this.$refs.tree.getCheckedKeys()
        var getIndexs = []
        for (var i = 0; i < this.data.length; i++) {
          var data1 = this.data[i]
          if (data1.children && data1.children.length) {
            if (checkedKeys.indexOf(data1.codes) >= 0) {
              checkedKeys.splice(checkedKeys.indexOf(data1.codes), 1)
            }
            for (var j = 0; j < data1.children.length; j++) {
              var data2 = data1.children[j]
              if (data2.children && data2.children.length) {
                if (checkedKeys.indexOf(data2.codes) >= 0) {
                  checkedKeys.splice(checkedKeys.indexOf(data2.codes), 1)
                }
                for (var k = 0; k < data2.children.length; k++) {
                  var data3 = data2.children[k]
                  if (checkedKeys.indexOf(data3.codes) >= 0) {
                    getIndexs.push({
                      label: data3.name,
                      key: data3.codes
                    })
                  }
                }
              } else if (checkedKeys.indexOf(data2.codes) >= 0) {
                getIndexs.push({
                  label: data2.name,
                  key: data2.codes
                })
              }

            }
          } else if (checkedKeys.indexOf(data1.codes) >= 0) {
            getIndexs.push({
              label: data1.name,
              key: data1.codes
            })
          }
        }
        this.mainPositionWinShow = true
        this.getIndex = checkedKeys;
        this.getIndexs = getIndexs;
      },
      handleCheckedStatChange() {
      },
      handleCheckedGetIndexChange() {
        this.$refs.tree.setCheckedKeys(this.getIndex);
      },
      handleCheckedGetTimeChange() {

      },
      changeTableSort() {
        this.drawLine();
      },
      conditionsClear() {
        this.getIndex = []
        this.getIndexs = []
        this.$refs.tree.setCheckedKeys([]);
      },
      conditionsClose() {
        this.mainPositionWinShow = false
      },
      downloadImpByChart() {
        var myChart = this.$echarts.init(document.getElementById("myChart"));
        var url = myChart.getConnectedDataURL({
          pixelRatio: 5,　　//导出的图片分辨率比率,默认是1
          backgroundColor: '#fff',　　//图表背景色
          excludeComponents: [　　//保存图表时忽略的工具组件,默认忽略工具栏
            'toolbox'
          ],
          type: 'png'　　//图片类型支持png和jpeg
        });
        var $a = document.createElement('a');
        var type = 'png';
        $a.download = myChart.getOption().title[0].text + '.' + type;
        $a.target = '_blank';
        $a.href = url;
        // Chrome and Firefox
        if (typeof MouseEvent === 'function') {
          var evt = new MouseEvent('click', {
            view: window,
            bubbles: true,
            cancelable: false
          });
          $a.dispatchEvent(evt);
        }
        // IE
        else {
          var html = ''

          '<body style="margin:0;">'
          '![](' + url + ')'
          '</body>';
          var tab = window.open();
          tab.document.write(html);
        }
      },

      output() {
        /* generate workbook object from table */
        var wb = XLSX.utils.table_to_book(document.querySelector("#mytable"));//mytable为表格的id名
        /* get binary string as output */
        var wbout = XLSX.write(wb, {
          bookType: "xlsx",
          bookSST: true,
          type: "array"
        });
        try {
          FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream" }),
            "sheet.xlsx"
          );
        } catch (e) {
          if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;
      },
      print() {
        window.print();
      }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .tree {
    overflow-y: auto;
    overflow-x: auto;
    /* width: 80px; */
    height: 800px;
  }
</style>
